<script setup lang='tsx'>
import EmojiPicker from 'vue3-emoji-picker'
import {
    Check,
    Delete,
    Edit,
    Message,
    Setting,
    Star,
    Close
} from '@element-plus/icons-vue'

// import css
import 'vue3-emoji-picker/css'

const content = ref([])
function onSelectEmoji(emoji: { i: string }) {
    console.log(emoji)


    // 如果超出限制，删除第一个 Emoji
    //@ts-ignore
    content.value.push(emoji.i)
    formatLen()
    //@ts-ignore
    /*
      // result
      { 
          i: "😚", 
          n: ["kissing face"], 
          r: "1f61a", // with skin tone
          t: "neutral", // skin tone
          u: "1f61a" // without tone
      }
      */
}
function formatLen() {
    // 如果超出限制，删除第一个 Emoji
    if (content.value.length > pickerConfig.showNum) {
        content.value.splice(0, content.value.length - pickerConfig.showNum);
    }
}
const pickerConfig = reactive({
    groupNames: {
        smileys_people: "微笑、人",
        animals_nature: "动物 & 自然",
        food_drink: "食物 & 饮料",
        activities: "活动",
        travel_places: "旅游景点",
        objects: "事物",
        symbols: "标志",
        flags: "旗帜",
        recent: "最近使用"
    },
    staticTexts: {
        placeholder: '搜索表情'
    },
    showNum: 6,
    editState: false
})
const { groupNames, staticTexts, showNum, editState } = toRefs(pickerConfig)
const dialogVisible = ref(false);
watch(showNum, (val: any) => {
    formatLen()
})
function remove(i: number) {
    content.value.splice(i, 1)
}
</script>

<template>
    <div class='h-100% w-100% flex flex-col'>
        <div class="h-50% flex flex-items-center flex-justify-center" style="font-size: 50px;">
            <div v-for="(item, i) in content" class="relative">
                {{ item }}
                <span class="absolute top--10% right--5% close-icon" @click="remove(i)" v-show="editState">
                    <el-icon>
                        <Close />
                    </el-icon>
                </span>
            </div>
        </div>
        <div class="h-50% relative">

            <div class="w-50% relative" style="margin: 0 auto;">
                <div class="absolute left-101% h-100% flex flex-col gap-10px">
                    <el-tooltip class="box-item" effect="dark" content="清除全部" placement="right">
                        <el-button type="danger" :icon="Delete" circle size="large" plain @click="content = []" />
                    </el-tooltip>
                    <el-tooltip class="box-item" effect="dark" content="设置" placement="right">
                        <el-button :icon="Setting" circle size="large" @click="dialogVisible = true" />
                    </el-tooltip>
                    <el-tooltip class="box-item" effect="dark" content="编辑" placement="right">
                        <el-button type="primary" :icon="Edit" circle size="large" plain
                            @click="editState = !editState" />
                    </el-tooltip>
                    <!-- 
                    <el-button type="success" :icon="Check" circle size="large" plain />
                    <el-button type="info" :icon="Message" circle size="large" plain /> -->
                    <!-- <el-button type="danger" :icon="Delete" circle @click="content = []" /> -->
                </div>
                <EmojiPicker :display-recent="true" :static-texts style="width:100%;height: 400px;" :native="true"
                    @select="onSelectEmoji" :group-names />
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="修改长度" width="500">
            <div class="flex flex-justify-center p-40px">
                <el-input-number v-model="pickerConfig.showNum" :min="0" />
            </div>
        </el-dialog>
    </div>
</template>

<style lang='scss' scoped>
:deep(.v3-emojis button span) {
    font-size: 30px;
}

:deep(.v3-emojis button) {
    flex-basis: 8.5% !important;
}

:deep(.v3-footer) {
    font-size: 20px;
}

:deep(.el-button + .el-button) {
    margin-left: 0;
}

.close-icon {
    font-size: 20px;
    border-radius: 50%;
    background-color: brown;
    color: #fff;
    cursor: pointer;
}
</style>